<template>
  <div class="menu-wrapper">
    <office-dialog ref="officeDialog" @confirm="dialogConfirm" />
    <el-form ref="sysEmployeeform" :model="sysEmployeeform" :rules="rules" label-width="80px">
      <div style="width: 100%;display: flex;align-items: flex-end;border-bottom: 1px #eee solid;margin-bottom: 20px">
        <span style="font-size: 18px;color:#409EFF;margin: 10px 0;" class="el-headerTitle">修改员工信息</span>
      </div>

        <el-form-item label="登录账号" prop="username">
          <el-col>
            <span>{{sysUser.username}}</span>
          </el-col>
        </el-form-item>
        <el-form-item label="员工姓名" prop="name">
          <el-col >
            <el-input v-model="sysEmployeeform.name" style="width: 400px"></el-input>
          </el-col>
        </el-form-item>

          <el-form-item label="所属门店" prop="shopId" >
            <el-select value-key="id" v-model="sysEmployeeform.shopName" style="width: 400px" placeholder="请选择" @change="shopselect" :filter-method="shoplistshow"  filterable>
              <el-option
                v-for="item in shoplist"
                :key="item.id"
                :label="item.name"
                :value="item">
              </el-option>
            </el-select>
          </el-form-item>
                  <el-form-item label="联系电话" prop="phone">
          <el-col >
            <el-input v-model="sysEmployeeform.phone" style="width: 400px"></el-input>
          </el-col>
        </el-form-item>
      <el-form-item label="员工号" prop="empNo">
        <el-input v-model="sysEmployeeform.empNo" style="width: 400px"></el-input>
      </el-form-item>

      <el-form-item label="所在岗位">
        <el-select v-model="syspost_list" multiple placeholder="请选择岗位" style="width: 400px">
          <el-option
            v-for="item in postOptions"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>

          <el-form-item label="绑定会员">
            <el-select style="width: 400px;" v-model="memberName" clearable :filter-method="loadMember" value-key="id"
                       filterable placeholder="请选择会员" @change="selectMember">
              <el-option style="width: 600px;" v-for="item in members" :key="item.id" :label="item.name" :value="item">
                <div style="display: flex">
                  <span style="width: 60px;">{{item.code}}</span>
                  <span style="float: left;width: 100px;overflow: hidden;text-overflow: ellipsis;">{{ item.name }}</span>
                  <span style="float: right; color: #8492a6; font-size: 8px;width: 80px;margin-left: 10px">{{ item.mobile }}</span>
                  <div style="width: 200px;">
                    <span style="color: #8492a6; font-size: 8px;">{{item.address}}</span>
                  </div>
                </div>
              </el-option>
              <div style="display: flex;width: 100%;position: absolute;bottom: 0">

                <div style="width: 50%;background-color: rgb(248,248,248);"></div>
                <div class="elOption" @click="toSearchMember">搜索客户</div>
              </div>
              <div style="height: 30px"></div>
            </el-select>
          </el-form-item>


        <el-form-item label="备注">
          <el-input type="textarea" style="width: 400px" v-model="sysEmployeeform.remark"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary"  :loading="loading" @click="updateSysEmployee('sysEmployeeform')">&nbsp&nbsp完 成&nbsp&nbsp</el-button>
        </el-form-item>

    </el-form>
    <el-dialog title="双击选择客户" :visible.sync="memberTableVisible" width="950px" v-el-drag-dialog append-to-body
               :before-close="memberTableClose">
      <div style="position: relative;">
        <member-table @memberDouble="memberDouble" @memberTableClose="memberTableClose"></member-table>
      </div>
    </el-dialog>
  </div>
</template>
<style scoped>
  .menu-wrapper {
    margin: 15px;
  }
  .el-headerTitle{
    font-size: 20px;
    color: #409EFF;
  }
  .elOption {
    background-color: #909399;
    color: white;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50%;
    height: 40px
  }
</style>
<script>
   import {lbsList} from '@/api/shop'
  import utils from '../../utils/utils.js'
  import {save,del,find,update} from '@/api/sysEmployee'
  import { EventBus } from '@/api/eventBus'
  import memberTable from '@/components/MemberTable/index'
  import elDragDialog from '@/directive/el-drag-dialog' // base on element-ui
  import {list as getPostList} from '@/api/sysPost'
  import OfficeDialog from '@/components/OfficeDialog'
  import { list as memberList,find as findMember } from '@/api/member'
  export default {
    name:'sysEmployee-edit',
    data() {
      return {
        memberTableVisible:false,
        sysUser:{},
        members:[],
        memberName:'',
        sysEmployeeform: {
          id:'',
          empNo: '',
          memberId:'',
          mchId: '',
          name: '',
          officeId: '',
          remark: '',
          phone:'',
          shopId:'',
          shopName:'',
        },
        loading: false,
        rules: {
          name: [
            {required: true, message: '请输入员工名称', trigger: 'blur'},
            {min: 2, max: 140, message: '长度在 2 到 140 个字符', trigger: 'blur'}
          ],
          phone: [
            {required: true, message: '请输入手机号', trigger: 'blur'}
          ],
          shopId: [
            { required: true, message: '请选择所属门店', trigger: 'blur' }
          ],
        },
        postOptions: [],
        syspost_list: [],
        topName:'',
        shoplist:[]
      }
    },
    directives: {
      elDragDialog
    },
    filters: {},
    components: {OfficeDialog,memberTable},
    created() {
      this.sysEmployeeform.id = this.$route.query.id
      this.findSysEmployee()
      this.openPostList()
      this.loadMember('')
      this.shoplistshow("")

    },
   watch:{ // 路由地址不变的情况下,如果id变化则重新获取数据
     $route (newVal, oldVal) {
       console.log('路由id');
         console.log(newVal);
       if (newVal.name=='sysEmployee-edit' && newVal.query.id!=this.sysEmployeeform.id) {
         this.findSysEmployee()
       }
     }
   },
    methods: {

      shopselect(val){
        this.sysEmployeeform.shopId=val.id
        this.sysEmployeeform.shopName=val.name
      },
      shoplistshow(query){
        let params = new URLSearchParams()
        params.append('keyword', query)
        lbsList(params).then(res=>{
          this.shoplist=res.data
        })
      },
      searchMember(data){
        findMember(data).then(res=>{
            this.memberName=res.data.member.name
        })
      },
      memberDouble(data){
        this.memberName=data.name
        this.sysEmployeeform.memberId=data.id
      },
      memberTableClose() {
        this.memberTableVisible = false
      },
      selectMember(data){
        this.memberName=data.name
        this.sysEmployeeform.memberId=data.id
      },
      toSearchMember() {
        this.memberTableVisible = true
      },
      dialogShow() {
        console.log('点击了')
        this.$refs.officeDialog.show()
      },
      //会员选择
      loadMember(query) {
        var _this = this
        let params = new URLSearchParams();
        params.append('keyword', query)
        memberList(params).then(response => {
          console.log(response);
          _this.members = response.data.data
        }).catch(error => {
          console.log('error!!')
        });
      },
      dialogConfirm(val) {
        console.log(val)
        this.topName = val.name
        this.sysEmployeeform.officeId = val.id
      },
      findSysEmployee() {
        var _this=this
        this.syspost_list=[]
        find(this.sysEmployeeform.id).then(response=>{

          this.sysUser=response.data.sysUser
          this.sysEmployeeform.empNo = response.data.sysEmployee.empNo
          this.sysEmployeeform.memberId=response.data.sysEmployee.memberId
          this.sysEmployeeform.mchId = response.data.sysEmployee.mchId
          this.sysEmployeeform.name = response.data.sysEmployee.name
          this.sysEmployeeform.officeId = response.data.sysEmployee.officeId
          this.sysEmployeeform.remark = response.data.sysEmployee.remark
          this.sysEmployeeform.phone = response.data.sysEmployee.phone
          this.sysEmployeeform.shopId = response.data.sysEmployee.shopId
          this.sysEmployeeform.shopName = response.data.sysEmployee.shopName
          this.topName = response.data.sysEmployee.officeName
          response.data.postList.forEach(function (item) {
              _this.syspost_list.push(item.id)
          })
          if (!utils.isNull(this.sysEmployeeform.memberId)){
              this.searchMember(this.sysEmployeeform.memberId)
          }
        }).catch(error => {
          _this.loading = false
          console.log('error!!')
        });
      },
      openPostList: function () {
        let _this = this;
        let params = new URLSearchParams();
        getPostList(params).then(response => {
          _this.postOptions = response.data.data
        }).catch(error => {
          console.log('error!!')
        });
      },
      updateSysEmployee: function (sysEmployeeform) {
        var _this = this
        this.$refs[sysEmployeeform].validate((valid) => {
          if (valid) { // 校验表单
            _this.loading = true
            let params = new URLSearchParams();
            _this.syspost_list.forEach(function (item) {
              params.append('postIds', item);
            })
            update(_this.sysEmployeeform,params).then(response => {
              _this.loading = false;
              _this.$message({
                message: response.content,
                offset: 120,
                center: true
              });
              EventBus.$emit('sysEmployee-edit', response.data)
              _this.$store.dispatch('tagsView/delView', _this.$route).then(({ visitedViews }) => {
                _this.$router.push({
                  path: '/sysEmployee/list'
                })
              })// 关闭当前tab回到列表
            }).catch(error => {
              _this.loading = false;
              console.log('error!!')
            });
          } else {
            console.log('error submit!!');
            return false
          }
        });
      }
    },
  }
</script>
